// Map类    表示地图类
// @row    表示行属性
// @col     表示列属性
// @width    表示宽度属性
// @height    表示高度属性
function Map(row, col, width, height) {
    // 接收数据
    this.row = row;
    this.col = col;
    this.width = width;
    this.height = height;

    // 定义容器属性
    this.dom = document.createElement('div');

    // 创建最外层数组属性
    this.arr = [];

    // 添加类名
    this.dom.className = 'box';
}

// 定义渲染方法
Map.prototype.fill = function() {
    // 遍历row  创建20个行容器
    for(var j = 0; j < this.row; j++) {
        // 创建行容器
        var row_dom = document.createElement('div');
        // 设置类名
        row_dom.className = 'row';

        // 创建行数组
        var row_arr = [];

        // 遍历col填充行容器
        for(var i = 0; i < this.col; i++) {
            // 创建列容器
            var col_dom = document.createElement('span');
            // 添加类名
            col_dom.className = 'col_span';
            // 追加元素
            row_dom.appendChild(col_dom);

            row_arr.push(col_dom);
        }
        // 将每一个填满的行容器 放到大容器中
        this.dom.appendChild(row_dom);

        // 将最外层数组填充
        this.arr.push(row_arr);
    }
    // 上树
    document.body.appendChild(this.dom);
}


// 清屏方法
Map.prototype.clear = function() {
    // 遍历数组
    for (var i = 0; i < this.arr.length; i++) {
        for (var j = 0; j < this.arr[i].length; j++) {
            this.arr[i][j].style.backgroundColor = '';
        }
    }
}